<template>
    <div class="madp-message-content">
        <div class="madp-message-content-outer" :class="{ 'outer-box': isTimeShow }">
            <div v-if="isTimeShow">
                <div class="madp-message-content-outer-text">发送日期:</div>
                <div class="madp-message-content-outer-select">
                    <el-select v-model="content.weekList" placeholder="请选择" multiple clearable @change="onWorkDayChange">
                        <el-option v-for="item in dayOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <div class="madp-space-place"></div>
                    <div>
                        <el-time-picker
                            v-model="content.daypartingGreetingStartTime"
                            placeholder="选择开始时间"
                            :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }"
                            format="HH:mm"
                            value-format="HH:mm"
                            @change="(time) => onTimeRangeChange(time, 'daypartingGreetingStartTime')"
                        ></el-time-picker>
                        <span class="madp-space-place">~</span>
                        <el-time-picker
                            v-model="content.daypartingGreetingEndTime"
                            placeholder="选择结束时间"
                            :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }"
                            format="HH:mm"
                            value-format="HH:mm"
                            @change="(time) => onTimeRangeChange(time, 'daypartingGreetingEndTime')"
                        ></el-time-picker>
                    </div>
                </div>
            </div>
            <div class="madp-message-content-outer-inner">
                <div class="madp-message-content-outer-inner-btn madp-message-content-outer-inner-common">
                    <span @click="insertCstName">[插入客户昵称]</span>
                </div>
                <div class="madp-message-content-outer-inner-input">
                    <el-input
                        type="textarea"
                        :rows="14"
                        resize="none"
                        placeholder="请输入消息内容"
                        v-model="content.words"
                        maxlength="600"
                        show-word-limit
                        @input="onContentTextChange"
                        @focus="selectionStart = 0"
                        :class="`${contentKeys}`"
                    ></el-input>
                </div>
                <div class="madp-message-content-outer-inner-annex" v-if="content.annexList && Object.keys(content.annexList).length > 0">
                    <div class="madp-annex-item">
                        <div class="madp-annex-item-left">
                            <i class="el-icon-remove-outline" @click="onRemoveAnnex()"></i>
                            【{{ content.annexList.type | transType }}】{{ content.annexList.title && `:${content.annexList.title}` }}
                        </div>
                        <div class="madp-annex-item-right">
                            <i class="el-icon-edit-outline" @click="openDialog(content.annexList.type)"></i>
                            <!-- <i class="el-icon-rank"></i> -->
                        </div>
                    </div>
                </div>
                <!-- <div class="madp-message-content-outer-inner-add madp-message-content-outer-inner-common">
					<el-popover placement="top-start" width="100" trigger="click" popper-class="madp-nopad-popover" ref="annexPopover">
						<div class="madp-annex">
							<div class="madp-annex-item pic" @click="openDialog('2')">图片</div>
							<div class="madp-annex-item pictxt" @click="openDialog('3')">图文</div>
							<div class="madp-annex-item applets" @click="openDialog('6')">小程序</div>
						</div>
						<div class="madp-annex-add-btn" slot="reference">
							<i class="el-icon-circle-plus-outline"></i>
							<span>添加附件</span>
						</div>
					</el-popover>
				</div> -->
            </div>
            <div class="madp-wel-message-preview">
                <div class="madp-wel-message-preview-outer">
                    <img src="/img/wel_preview.png" alt />
                    <div class="madp-wel-message-preview-outer-inner">
                        <div
                            class="madp-message"
                            :class="{
                                'madp-mb': content.annexList && content.annexList.length > 0
                            }"
                            v-if="content.words"
                        >
                            <div class="madp-message-left">
                                <i class="el-icon-user-solid"></i>
                            </div>
                            <div class="madp-message-right madp-message-common madp-message-common-box">{{ content.words }}</div>
                        </div>
                        <div class="madp-message madp-mt" v-if="content.annexList && Object.keys(content.annexList).length > 0">
                            <div class="madp-message-left">
                                <i class="el-icon-user-solid"></i>
                            </div>
                            <div class="madp-message-pic madp-message-common" v-if="content.annexList.type === 2">
                                <img :src="content.annexList.url" alt />
                            </div>
                            <div class="madp-message-picTxt madp-message-common madp-message-common-box" v-if="content.annexList.type === 3">
                                <img :src="content.annexList.imgUrl" alt />
                                <div class="madp-message-picTxt-info">
                                    <div class="madp-message-picTxt-info-top">{{ content.annexList.title }}</div>
                                    <div class="madp-message-picTxt-info-bottom">{{ content.annexList.description }}</div>
                                </div>
                            </div>
                            <div class="madp-message-applets madp-message-common madp-message-common-box" v-if="content.annexList.type === 6">
                                <div class="madp-message-applets-title">
                                    <img src="/img/applets.png" alt />
                                    <span>{{ content.annexList.title }}</span>
                                </div>
                                <img :src="content.annexList.imgUrl" alt />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="annexVisible" @close="onClose" width="700px" :close-on-click-modal="false">
            <div class="madp-annex-list" v-if="annexList && annexList.length > 0">
                <div v-for="(item, index) in annexList" :key="index">
                    <div class="madp-annex-list-pic" v-if="annexType === '2'">
                        <img :src="item.content[0].content.url" @click="onAnnexChange(item.content[0].content, '2', item.id)" />
                    </div>
                    <div class="madp-annex-list-pic" v-if="annexType === '3'">
                        <img :src="item.content[0].content.imgUrl" @click="onAnnexChange(item.content[0].content, '3', item.id)" />
                    </div>
                    <div class="madp-annex-list-pic" v-if="annexType === '6'">
                        <img :src="item.content[0].content.imgUrl" @click="onAnnexChange(item.content[0].content, '6', item.id)" />
                    </div>
                </div>
            </div>
            <div v-else>
                <el-empty description="暂无内容"></el-empty>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getMediumList } from '@/api/customer-into/welcomespeech';
import Sortable from 'sortablejs';
export default {
    props: {
        messageInfo: {
            type: Object,
            default: () => ({})
        },
        contentKeys: {
            type: String,
            default: ''
        },
        isTimeShow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 表单对象
            content: {},
            // 日期选项
            dayOptions: [
                { label: '周一', value: 1 },
                { label: '周二', value: 2 },
                { label: '周三', value: 3 },
                { label: '周四', value: 4 },
                { label: '周五', value: 5 },
                { label: '周六', value: 6 },
                { label: '周日', value: 7 }
            ],
            // 弹窗开关
            annexVisible: false,
            // 弹窗标题
            dialogTitle: '',
            // 类型
            annexType: '',
            annexList: [],
            annexIndex: undefined
        };
    },
    filters: {
        transType(val) {
            switch (val) {
                case 2:
                    return '图片';
                case 3:
                    return '图文';
                case 6:
                    return '小程序';
                default:
                    break;
            }
        }
    },
    mounted() {
        this.content = JSON.parse(JSON.stringify(this.messageInfo));
        // this.rowMove()
    },
    methods: {
        // 输入框内容更新
        onContentTextChange() {
            this.$emit('onContentChange', {
                words: this.content.words
            });
            this.content.words = this.content.words.replace(/\s+/g, '');
        },
        // 插入客户昵称
        insertCstName() {
            let start = 0;
            if (this.selectionStart) {
                start = this.selectionStart;
            } else {
                const textarea = document.querySelector(`.${this.contentKeys} .el-textarea__inner`);
                start = textarea.selectionStart; // input 第0个字符到选中的字符
            }
            this.selectionStart = start;
            this.content.words = this.content.words.slice(0, start) + '##用户名称##' + this.content.words.slice(start);
            this.$nextTick(() => {
                this.onContentTextChange();
            });
        },
        // 工作日变更
        onWorkDayChange(selectedKeys) {
            this.$emit('onContentChange', { weekList: selectedKeys });
        },
        // 工作日时间区间变更
        onTimeRangeChange(time, type) {
            this.$emit('onContentChange', { [type]: time });
        },
        // 附件新增
        onAnnexChange(imgInfo, type, mediumId) {
            const info = {
                ...imgInfo,
                type,
                mediumId
            };
            this.content.annexList = info;
            this.$emit('onContentChange', {
                annexList: JSON.parse(JSON.stringify(this.content.annexList))
            });
            this.annexVisible = false;
        },
        onRemoveAnnex(index) {
            this.content.annexList = {};
            this.$emit('onContentChange', {
                annexList: JSON.parse(JSON.stringify(this.content.annexList))
            });
        },
        // 打开附件弹框
        openDialog(type) {
            if (this.$refs.annexPopover) {
                this.$refs.annexPopover.doClose();
            }
            getMediumList({ type })
                .then((res) => {
                    if (res.data.code === 0) {
                        this.annexList = res.data.data.records || [];
                    }
                })
                .then(() => {
                    this.annexVisible = true;
                    this.annexType = type;
                    if (type === '2') {
                        this.dialogTitle = '图片';
                    } else if (type === '3') {
                        this.dialogTitle = '图文';
                    } else if (type === '6') {
                        this.dialogTitle = '小程序';
                    }
                });
        },
        // 点击关闭
        onClose() {
            this.annexVisible = false;
            this.annexType = '';
            this.dialogTitle = '';
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-message-content {
    margin-bottom: 20px;
    &-outer {
        width: 100%;
        margin-left: 55px;
        background-color: #fbfbfb;
        position: relative;
        &.outer-box {
            padding: 16px 0 24px 24px;
            border: 1px solid #eee;
            border-radius: 2px;
            margin-left: 0;
        }
        &-select {
            display: flex;
            margin: 10px 0;
            /deep/ .el-input {
                width: 420px !important;
            }
            /deep/ .el-date-editor {
                width: 110px !important;
            }
        }
        &-inner {
            box-sizing: border-box;
            border: 1px solid #eee;
            border-radius: 2px;
            &-common {
                height: 32px;
                line-height: 32px;
                padding: 0 15px;
            }
            &-btn {
                color: #e8971d;
                border-bottom: 1px dashed #e9e9e9;
                span {
                    cursor: pointer;
                }
            }
            &-input {
                /deep/ .el-textarea__inner {
                    border: none;
                    background-color: transparent;
                }
            }
            &-add {
                border-top: 1px dashed #e9e9e9;
            }
            &-annex {
                .madp-annex-item {
                    padding: 5px 16px;
                    display: flex;
                    justify-content: space-between;
                    &-left,
                    &-right {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    &-left {
                        i {
                            font-size: 18px;
                        }
                    }
                    &-right {
                        width: 50px;
                        font-size: 22px;
                        justify-content: flex-end;
                    }
                }
            }
        }
    }
    .madp-wel-message-preview {
        position: absolute;
        top: 0;
        right: -300px;
        &-outer {
            position: relative;
            img {
                height: 450px;
            }
            &-inner {
                position: absolute;
                top: 80px;
                left: 25px;
                height: 285px;
                overflow: auto;
                &::-webkit-scrollbar {
                    display: none;
                }
                .madp-message {
                    display: flex;
                    &-left {
                        height: 26px;
                        padding: 0 6px;
                        margin-top: 5px;
                        margin-right: 10px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #1890ff;
                        color: #fff;
                    }
                    &-common {
                        width: 140px;
                    }
                    &-common-box {
                        background-color: #fff;
                        padding: 5px;
                        border-radius: 5px;
                    }
                    &-right {
                        line-height: 18px;
                        word-break: break-all;
                        word-wrap: break-word;
                    }
                    &-pic {
                        img {
                            width: 100%;
                            height: auto;
                        }
                    }
                    &-picTxt {
                        display: flex;
                        img {
                            width: 40px;
                            height: 40px;
                        }
                        &-info {
                            font-size: 12px;
                            padding-left: 5px;
                            padding-top: 5px;
                            &-top,
                            &-bottom {
                                width: 95px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            &-bottom {
                                color: rgba($color: #000000, $alpha: 0.45);
                            }
                        }
                    }
                    &-applets {
                        img {
                            width: 130px;
                            height: auto;
                        }
                        &-title {
                            display: flex;
                            align-items: center;
                            img {
                                width: 20px;
                                height: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.madp-annex {
    &-item {
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        &.pic:hover {
            background-color: #effaff;
        }
        &.pictxt:hover {
            background-color: #effaff;
        }
        &.applets:hover {
            background-color: #effaff;
        }
    }
}
.madp-annex-list {
    display: flex;
    flex-wrap: wrap;
    &-pic {
        padding: 10px;
        &:hover {
            padding: 5px;
            img {
                width: 140px;
            }
        }
        img {
            width: 130px;
            cursor: pointer;
        }
    }
}
.madp-annex-add-btn {
    width: 200px;
    color: #1890ff;
    display: flex;
    align-items: center;
    .el-icon-circle-plus-outline {
        margin-right: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    span {
        cursor: pointer;
    }
}
.madp-space-place {
    padding: 0 8px;
}
.madp-mt {
    margin-top: 10px;
}
</style>
